﻿@using Resource;
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <title>UtilizationRate</title>
    @{ await Html.RenderPartialAsync("/Views/Shared/_LayoutScript.cshtml"); }
    @{ await Html.RenderPartialAsync("/Views/Shared/_StyleCss.cshtml"); }

    <link href="/css/ReportOee.css?v=@DateTime.Now.Ticks" rel="stylesheet" />
    <style type="text/css">
        .modaltabcontent {
            display: none;
            padding: 0.1rem 0.2rem;
            border-top: none;
        }

        td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 2rem;
        }

        .tab > span:hover {
            background-color: #384e61;
        }

        .legend {
            display: flex;
            justify-content: center;
            margin-bottom: 0.1rem;
        }

        .legend > span {
            padding: 1px;
            text-align: center;
            /*border-radius: 1pc;*/
            font-size: 0.12rem;
            width: 0.6rem;
            margin: 0 0.1rem;
        }

        #Tab-Item {
            width: calc(100% - 2rem);
        }

        .tablinks {
            display: inline-block;
        }

        .devic {
            display: inline-block;
            width: 0.15rem;
            height: 0.15rem;
            border-radius: 50%;
            color: white;
            font-size: 0.1rem;
            line-height: 0.2rem;
            margin-bottom: 0.5vh;
            position: relative;
            /*呼吸灯*/
            /*animation: devic 3s ease-in-out infinite;*/
            animation: devic 1s linear infinite;
        }

            .devic::before,
            .devic::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 50%;
                animation: inherit;
                animation-delay: 1s;
            }

            .devic::after {
                animation-delay: 2s;
            }

        @@keyframes devic {
            0% {
                box-shadow: 0 0 0 0.03rem var(--ripple-color);
            }

            100% {
                box-shadow: 0 0 0 0.06rem rgba(255,255,255, 0);
            }
        }

        .divfolt {
            margin: 0 0.1rem;
            padding: 0.1rem 0;
            width: 10%;
            height: 0.6rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

            .divfolt:hover {
                background-color: rgba(255, 255, 255, 0.2);
            }

            .divfolt p {
                font-size: 0.1rem;
                margin: 0.02rem;
            }

        .circle {
            display: inline-block;
            width: 0.16rem;
            height: 0.16rem;
            border-radius: 50%;
            margin-right: 0.2vw;
            /*根据父元素垂直居中*/
            vertical-align: middle;
        }

        .await {
            background-color: rgba(38, 154, 188, 1);
        }

        .inidle {
            background-color: rgba(246, 139, 167, 1);
        }

        .breakdown {
            background-color: rgba(172, 41, 37, 1);
        }

        .debug, .unproduced {
            background-color: rgba(213, 133, 18, 1);
        }

        .normal {
            background-color: rgba(57, 132, 57, 1);
        }

        #devicedetailt {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            display: none;
            width: 85%;
            height: 2.5rem;
            text-align: center;
            padding: 0.12rem;
            background-color: #fff;
            border-radius: 0.1rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .message-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 0.1rem;
            border: 1px solid wheat;
            border-radius: 0.1rem;
            color: black;
            font-size: 0.15rem;
        }
    </style>
</head>
<body class="fill-parent" style="overflow-y: hidden">
    <div class="main">
        <div class="header">
            <div class="header-left fl">
                <img src="/images/logo.png?v=@DateTime.Now.Ticks" class="scaled-image" draggable="false" oncontextmenu="return false;" ondragstart="return false;" />
            </div>
            <div class="quer">
                <spn>
                    <div id="query">
                        <select id="cmb_proj_code">
                            <option value="">@Label.PleaseSelect</option>
                        </select>
                        <select id="cmb_product_code">
                            <option value="">@Label.PleaseSelect</option>
                        </select>
                        <select id="cmb_process_code">
                            <option value="">@Label.PleaseSelect</option>
                        </select>
                    </div>
                </spn>
            </div>

            <div class="btn">
                <spn>
                    <div id="query">
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Desktop</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" href=@Html.Raw($"https://dashboard.li.lumentuminc.net/API/DesktopApp/Dashboard.exe?v={DateTime.Now.Ticks}") download>@Label.Local</a>
                                <a class="menudropdown" href=@Html.Raw($"https://dashboard.li.lumentuminc.net/API/DesktopApp/Dashboard_lnk.zip?v={DateTime.Now.Ticks}") download>@Label.Shortcut</a>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Equipment@Label.Data</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" onclick="Openforms('Binding_Add')">@Label.Equipment@Label.Message</a>
                                <a class="menudropdown" onclick="ProductionDataExport('Production')">@Label.Data@Label.Export</a>
                                <a class="menudropdown" onclick="OeeDataExport('OEE_HISTORY_DATA')">@Html.Raw("OEE" + Label.Export)</a>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Language</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" onclick="setLanguageCookie('@Const.CNLANGUAGE')">@Label.Chinese</a>
                                <a class="menudropdown" onclick="setLanguageCookie('@Const.USLANGUAGE')">@Label.English</a>
                            </div>
                        </div>
                        <button class="modalBtn dimension">@Label.Full</button>
                    </div>
                </spn>
            </div>
            <div class="header-center fl">
                <div class="header-title"></div>
                <div class="header-img"></div>
            </div>
            <div class="header-right fl" id="time"></div>
            <div class="header-bottom fl"></div>
        </div>
        <div class="center">
            <div class="center-left fl">
                <div class="left-top rightTop border">
                    <div class="tab">
                        <span class="title" style=" position: absolute; top: 0.15rem; left:10px;">@Label.Equipment@Label.Time@Label.Utilization</span>
                    </div>
                    <div class="legend">
                        <span class="normal"><label>@Label.Run</label></span>
                        <span class="await"><label>@Label.Rest</label></span>
                        <span class="unproduced"><label>@Label.No@Label.Output</label></span>
                    </div>
                    <div id="Tab1" class="tabcontent" style="height: 4.25rem;"></div>
                </div>
            </div>
            <div class="center-right fr">
                <div class="right-top rightTop border">
                    <div class="tab">
                        <span class="title" style=" position: absolute; top: 0.15rem; left: 10px;">@Label.Equipment@Label.Output</span>
                    </div>
                    <div id="legend"></div>
                    <div id="Tab2" class="tabcontent" style="height: 4.25rem;"></div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" href="?v=@DateTime.Now.Ticks">
        //模板初始化配置
        var asyncType = false;
        $(document).ready(function () {
            var whei = $(window).height();
            $("html").css({ fontSize: whei / 12.5 });
            $(window).resize(function () {
                if ($(".dimension").text() == "@Html.Raw(Label.Full)") {
                    var whei = $(window).height();
                    $("html").css({ fontSize: whei / 12.5 });
                }
                else {
                    var whei = $(window).width();
                    $("html").css({ fontSize: whei / 22 })
                }
            });
            /*当前时间*/
            function numberToUpperCase(number) {
                var uppercaseMonths = [
                    '一月','二月','三月','四月','五月','六月',
                    '七月','八月','九月','十月','十一月','十二月'
                ];
                return uppercaseMonths[number - 1];
            }
            var myDate = new Date();
            var result = numberToUpperCase(myDate.getMonth() + 1);
            $('.header-title').html("@Html.Raw(Label.Equipment+Label.Utilization)");
            function getTime() {
                var myDate = new Date();
                var myYear = myDate.getFullYear(); //年
                var myMonth = myDate.getMonth() + 1; //月
                var myToday = myDate.getDate(); //日
                var myDay = myDate.getDay(); //星期
                var myHour = myDate.getHours(); //小时
                var myMinute = myDate.getMinutes(); //分钟
                var mySecond = myDate.getSeconds(); //秒数
                var week = ['@Label.Sunday', '@Label.Monday', '@Label.Tuesday', '@Label.Wednesday', '@Label.Thursday', '@Label.Friday', '@Label.Saturday'];
                var nowTime;

                nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
                $('#time').html(nowTime);
            };
            function fillZero(str) {
                var realNum;
                if (str < 10) {
                    realNum = '0' + str;
                } else {
                    realNum = str;
                }
                return realNum;
            }
            setInterval(getTime, 1000);

            // 设置全屏
            $('.dimension').on('click', function (e) {
                var element = document.documentElement;
                if ($(".dimension").text() == "@Html.Raw(Label.Full)") {
                    // 判断浏览器设备类型
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.mozRequestFullScreen) {       //兼容火狐
                        element.mozRequestFullScreen();
                    } else if (element.webkitRequestFullscreen) {    //兼容谷歌
                        element.webkitRequestFullscreen();
                    } else if (element.msRequestFullscreen) {        //兼容IE
                        element.msRequestFullscreen();
                    }
                    $(".dimension").text("@Html.Raw(Label.Exit+Label.Full)");
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    $(".dimension").text("@Html.Raw(Label.Full)");
                }
            });
        });

        //初始化三级联动
        $(document).ready(function () {
            var cmb_proj_code_Select = $('#cmb_proj_code');
            var cmb_product_code_Select = $('#cmb_product_code');
            var cmb_process_code_Select = $('#cmb_process_code');
            var projcodeSelect = $('#projcode');
            var productSelect = $('#product');
            var processSelect = $('#process');
            GetUtilizationRate("Tab1");
            //$('#cmb_query_type').prop('selectedIndex', 0);ReportAction
            $.ajax({
                //url: 'http://localhost:44304/ReportAction/GetProjCode',
                url: api + '/ReportAction/GetProjCode',
                type: 'POST',
                success: function (data) {
                    populateSelect(projcodeSelect, data.ReturnData, true);
                    populateSelect(cmb_proj_code_Select, data.ReturnData, true);
                }
            });

            function populateSelect(select, data, defaultOptionText) {
                select.empty();
                if (defaultOptionText) {
                    select.append($('<option>', {
                        value: null,
                        text: '@Html.Raw(Label.PleaseSelect)'
                    }));
                }
                else {
                    select.append($('<option>', {
                        value: 'ALL',
                        text: 'ALL'
                    }));
                }
                $.each(data, function (key, value) {
                    select.append($('<option>', {
                        value: value.value,
                        text: value.text
                    }));
                });
            }

            function fetchData(select, projcode, product) {
                $.ajax({
                    url: api + '/Dashboard/GetComProductCode',
                    type: 'POST',
                    data: { proj_code: projcode },
                    success: function (data) {
                        populateSelect(select, data.ReturnData);
                    }
                });
            }

            $(document).on('change', '#cmb_proj_code', function () {
                cmb_product_code_Select.empty();
                cmb_process_code_Select.empty();
                var projcode = $(this).val();
                if (projcode) {
                    cmb_process_code_Select.append($('<option>', {
                        value: 'ALL',
                        text: 'ALL'
                    }));
                    fetchData(cmb_product_code_Select, projcode);
                }
            });

            $(document).on('change', '#product', function () {
                var projcode = projcodeSelect.val();
                var product = $(this).val();
                populateProcessSelect(processSelect, projcode, product);
            });

            $(document).on('change', '#cmb_product_code', function () {
                var projcode = cmb_proj_code_Select.val();
                var product = $(this).val();
                populateProcessSelect(cmb_process_code_Select, projcode, product);
                /*if (product != "ALL") { query(); }*/
            });
            $(document).on('change', '#cmb_process_code', function () {
                var processcode = $(this).val();
                if (processcode) {
                    query();
                }
            });

            function populateProcessSelect(select, projcode, product) {
                select.empty();
                select.append($('<option>', {
                    value: 'ALL',
                    text: 'ALL'
                }));
                if (product) {
                    $.ajax({
                        url: api + '/Dashboard/GetComProcessCode',
                        type: 'POST',
                        data: { proj_code: projcode, product_code: product },
                        success: function (data) {
                            populateSelect(select, data.ReturnData);
                        }
                    });
                }
            }
        });

        function showMessage(msg) {
            var messageElement = $('<div>').addClass('message-box').text(msg);
            $('body').append(messageElement);
            messageElement.hide().fadeIn(500);
            setTimeout(function () {
                messageElement.fadeOut(500, function () {
                    messageElement.remove();
                });
            }, 1500);
        }

        //初始化图表
        var memachinetype;
        var chartIds = ['Tab1', 'Tab2'];
        //图表自适应大小
        function echartsautomatic() {
            var charts = [];
            chartIds.forEach(function (chartId) {
                var chart = echarts.init(document.getElementById(chartId));
                charts.push(chart);
            });
            window.onresize = function () {
                charts.forEach(function (chart) {
                    chart.resize();
                });
            };
        }

        //Tab页签定时切换
        var Tabtimer;
        function TabInterval() {
            clearInterval(Tabtimer);
            Tabtimer = setInterval(function () {
                query();
            }, 10 * 60 * 1000);
        }

        var query = function () {
            GetUtilizationRate("Tab1");
            TabInterval();
        }

        var Openforms = function () {
            window.open(url + "/Report/EquipmentAdd", "_blank");
        }

        function Export(type) {
            var projcode = $('#cmb_proj_code').val();
            var product = $('#cmb_product_code').val();
            var pam = {
                type: type,
                proj_code: $('#cmb_proj_code').val(),
                product_code: $('#cmb_product_code').val() == null ? "ALL" : $('#cmb_product_code').val(),
                process_code: $('#cmb_process_code').val() == null ? "ALL" : $('#cmb_process_code').val()
            };
            //var url = "http://localhost:44304/Dashboard/ExportToExcel?" + $.param(pam);
            var url = api + "/Dashboard/ExportToExcel?" + $.param(pam);
            if (projcode && product) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.responseType = 'blob';
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        var url = window.URL.createObjectURL(xhr.response);
                        var a = document.createElement('a');
                        a.href = url;
                        a.download = type.toLocaleUpperCase() + '.xlsx';
                        a.click();
                        window.URL.revokeObjectURL(url);
                    }
                };
                xhr.send();
            }
        }

        /*导出生产数据*/
        var ProductionDataExport = function (type) {
            Export(type);
        }

        /*OEE历史数据导出*/
        var OeeDataExport = function (type) {
            Export(type);
        }

        /*设备利用率*/
        var UtilizationRateDta;
        var ratedt;
        var GetUtilizationRate = function (id) {
            var whe = { CL_TYPE: "OTD", PROD_TYPE:"ALL"};
            var pam = {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val(),
                header_key: JSON.stringify(whe)
            };
            $.ajax({
                type: "POST",
                url: api + "/ReportAction/GetGanttChartData",
                async: asyncType,
                data: pam,
                dataType: "json",
                success: function (data) {
                    if (data.ReturnData.Table.length > 0) {
                        UtilizationRateDta = data.ReturnData;
                        ratedt = data.ReturnData.Table2;
                        var chart = echarts.init(document.getElementById(id));
                        chart.dispose();
                        TodayDeviceStatus(id, data.ReturnData.Table);
                        //TodayDeviceOuput("Tab2", data.ReturnData.Table2);
                    }
                }
            });
        }

        /*设备利用率*/
        var TodayDeviceStatus = function (id, data) {
            var myChart = echarts.init(document.getElementById(id));
            var types = [
                { name: '运行', color: '#07c160' },
                { name: '未产出', color: '#edb217' }
                //{ name: '待生产', color: '#269abc' },
                //{ name: '调试', color: '#edb217' },
                //{ name: '维修', color: '#f68ba7' },
                //{ name: '故障停机', color: '#ff3374' }

            ];
            //TESTER	STATUSDESC	START_TIME	TEST_TIME
            var startTime;
            var datatemp = [];
            for (let i = 0; i < data.length; i++) {
                startTime = new Date(data[i].START_TIME).getTime();
                var typeItem = types.find(a => a.name === data[i].STATUSDESC);
                if (typeItem) {
                    datatemp.push({
                        name: typeItem.name,
                        value: [
                            parseInt(data[i].GROUPID),
                            new Date(data[i].START_TIME).getTime(),
                            new Date(data[i].TEST_TIME).getTime(),
                            //data[i].DIFF_MILLISEC,
                            data[i].TESTER
                        ],
                        //barCategoryGap: '50%',
                        /*barGap: '2%', */
                        //barWidth: '40%',
                        itemStyle: {
                            normal: {
                                color: typeItem.color
                            }
                        }
                    });
                }
            }
            var categories1 = data.map(item => item.TESTER).filter((name, index, arr) => arr.indexOf(name) === index);
            var categories2 = categories1.map(name => {
                const foundItem = ratedt.find(item => item.TESTER === name);
                const result = "90%"//foundItem ? foundItem.TIME_RATE.toFixed(2) + "%" : "";
                return result;

            });
            function renderItem(params, api) {
                var categoryIndex = api.value(0);
                var start = api.coord([api.value(1), categoryIndex]);
                var end = api.coord([api.value(2), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.6;
                const style = api.style();
                var rectShape = echarts.graphic.clipRectByRect(
                    {
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height
                    },
                    {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                    }
                );
                return (
                    rectShape && {
                        type: 'rect',
                        transition: ['shape'],
                        shape: rectShape,
                        style: style
                    }
                );
            }
            option = {
                label: {
                    show: true,
                    color: 'white',
                    fontSize: '0.12rem',
                    fontWeight: 'bold'
                },
                grid: {
                    top: '0.5%',
                    left: '2%',
                    right: '2%',
                    bottom: '10%',
                    width: '96%',
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    fontSize: '0.13rem',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    },
                    formatter: function (params) {
                        return params.value[4] + '\t' + params.name + '\t' + params.marker + (new Date(params.value[1])).getHours() + ':' + (new Date(params.value[1])).getMinutes() + '—' + (new Date(params.value[2])).getHours() + ':' + (new Date(params.value[2])).getMinutes();
                    }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        filterMode: 'weakFilter'
                    },
                    {
                        type: "slider",
                        show: true,
                        height: "1.5%",
                        bottom: "4.5%",
                        labelFormatter: '',
                        backgroundColor: "white",
                        brushSelect: false,
                        minValueSpan: 3600 * 24 * 1000 * 7,
                        handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
                        handleSize: "10vw",
                        handleColor: 'white',
                        start: 0,
                        end: 100,
                        handleStyle: {
                            borderCap: 'round',
                            color: "#fff",
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowBlur: 1
                        },
                        color: "transparent",
                        borderColor: 'transparent',
                        backgroundColor: 'rgba(0, 128, 204,0.3)',
                        dataBackground: {
                            lineStyle: {
                                width: 0
                            },
                            areaStyle: {
                                color: 'transparent'
                            }
                        },
                        fillerColor: '#0080CC'
                    }
                ],
                xAxis: {
                    type: 'time',
                    //min: new Date(startTime).setHours(7, 0, 0, 0),
                    //max: new Date(new Date(startTime).setDate(new Date(startTime).getDate() + 1)).setHours(7, 0, 0, 0),
                    interval: 3600000,
                    scale: true,
                    axisLabel: {
                        formatter: function (val) {
                            var date = new Date(val);
                            var options = { hour: '2-digit', minute: '2-digit', hour12: false };
                            var formattedTime = new Intl.DateTimeFormat('en-US', options).format(date);
                            return formattedTime;
                            //return new Date(val).toLocaleTimeString('en-US', { hour: '2-digit', minute: 'numeric', hour12: false });
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            fontSize: '0.14rem'
                        }
                    },
                    axisLabel: {
                        show: true,
                        color: '#fff',
                        fontSize: '0.14rem'
                    }
                },
                yAxis: [
                    {
                        yAxisIndex: 0,
                        data: categories1,
                        scale: true,
                        splitLine: { show: false },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            color: '#fff',
                            fontSize: '0.12rem',
                            fontWeight: 'bolder'
                        }
                    },
                    {
                        yAxisIndex: 1,
                        type: 'category',
                        data: categories2,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            color: function (value, index) {
                                return parseInt(value.replace(/%/, '')) < 80 ? 'red' : '#fff';
                            },
                            fontSize: '0.12rem',
                            fontWeight: 'bolder'
                        }
                    }
                ],
                series: [
                    {
                        type: 'custom',
                        renderItem: renderItem,
                        itemStyle: {
                            opacity: 0.8
                        },
                        encode: {
                            x: [1, 2],
                            y: 0
                        },
                        data: datatemp
                    }
                ]
            };
            myChart.setOption(option);
            tools.loopShowTooltip(myChart, option, { loopSeries: true });
            myChart.on('click', function (params) {
            });
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
        /*设备产出*/
        var TodayDeviceOuput = function (id, data) {
            var myChart = echarts.init(document.getElementById(id));
            var yAxisData1 = data.map(item => item.TESTER).filter((name, index, arr) => arr.indexOf(name) === index);
            var FAILData = data.map(item => item.SUM_FAIL_QTY);
            var outputData = data.map(item => item.SUM_OUTPUT_QTY);
            var yAxisData2 = data.map(item => item.YIELD_RATE + "%");
            option = {
                label: {
                    show: true,
                    color: 'white',
                    fontSize: '0.12rem',
                    fontWeight: 'bold'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    textStyle: {
                        fontSize: '0.14rem',
                        align: 'left'
                    },
                    axisPointer: {
                        type: 'shadow',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                legend: {
                    data: ['OUTPUT', 'FAIL'],
                    width: '100%',
                    itemGap: 15,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.14rem'
                    }
                },
                grid: {
                    top: '5%',
                    left: '2%',
                    right: '3%',
                    bottom: '5%',
                    width: '95%',
                    containLabel: true
                },
                xAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: true,
                        textStyle: {
                            color: 'red',
                            fontSize: '0.14rem',
                            fontWeight: 'bold'
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.14rem'
                        },
                        show: true
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        yAxisIndex: 0,
                        type: 'category',
                        data: yAxisData1,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.12rem',
                                fontWeight: 'bolder',
                            },
                            show: true
                        }
                    },
                    {
                        yAxisIndex: 1,
                        type: 'category',
                        data: yAxisData2,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: function (value, index) {
                                    return parseInt(value.replace(/%/, '')) < 80 ? 'red' : '#fff';
                                },
                                fontSize: '0.12rem',
                                fontWeight: 'bolder',
                            },
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        name: 'OUTPUT',
                        type: 'bar',
                        stack: 'total',
                        barCategoryGap: '30%',
                        barWidth: '60%',
                        label: {
                            show: true,
                            color: 'white'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            normal: {
                                color: '#07C160'
                            }
                        },
                        data: outputData.map(function (item) {
                            return parseInt(item) > 0 ? item : null;
                        })
                    },
                    {
                        name: 'FAIL',
                        type: 'bar',
                        stack: 'total',
                         barCategoryGap: '30%',
                         barWidth: '60%',
                        label: {
                            show: true,
                            color: 'white'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            normal: {
                                color: '#FF3374'
                            }
                        },
                        data: FAILData.map(function (item) {
                            return parseInt(item) > 0 ? item : null;
                        })
                    },
                ]
            };
            myChart.setOption(option);
            myChart.on('click', function (params) {
                if (UtilizationRateDta.Table.length > 0) {
                    var charthtml = `<div id="devicedetailt" class="modal-content"></div>`;
                    $("#Tab2").append(charthtml);
                    $("#devicedetailt").css("display", "block");
                    var chart = echarts.init(document.getElementById('devicedetailt')).dispose();
                    EquipmentHourOputChart(params.name);
                }
                else {
                    $("#devicedetailt").css("display", "none");
                    showMessage(`${params}@Html.Raw(Label.No+Label.Correlation+Label.Data)!`);
                }
            });
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }

        $('#Tab2').mouseleave(function () {
            $("#devicedetailt").css("display", "none");
        })
        /*小時產出*/
        var EquipmentHourOputChart = function (tester) {
            var HourOputDt = UtilizationRateDta.Table1;
            var filteredData = HourOputDt.filter(function (item) {
                return item.TESTER === tester;
            });
            var xAxisData = filteredData.map(function (item) {
                return item.HOUR;
            });
            var yAxisData1 = filteredData.map(function (item) {
                return item.SUM_FAIL_QTY;
            });
            var yAxisData2 = filteredData.map(function (item) {
                return item.SUM_OUTPUT_QTY;
            });
            var yieldrate = filteredData.map(function (item) {
                return item.YIELD_RATE;
            });
            var vaulemax = Math.max.apply(yAxisData1, yAxisData2);
            var myChart = echarts.init(document.getElementById('devicedetailt'));
            var options = {
                label: {
                    show: true,
                    color: 'white',
                    fontSize: '0.12rem',
                    fontWeight: 'bold'
                },
                title: {
                    text: filteredData[0].TESTER,
                    textStyle: {
                        fontSize: '0.14rem',
                        textAlign: 'center'
                    }
                },
                textStyle: {
                    fontSize: '0.1rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    textStyle: {
                        fontSize: '0.12rem',
                        align: 'left'
                    },
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend:{
                    data: ['OUTPUT_QTY', 'FAIL_QTY','YIELD'],
                    width: '100%',
                    itemGap: 10,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        fontSize: '0.12rem'
                    }
                },
                grid: {
                    top: '25%',
                    left: '2%',
                    right:'2%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis:
                {
                    yAxisIndex: 0,
                    type: 'category',
                    data: xAxisData,
                    textStyle: {
                        fontSize: '0.12rem'
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        textStyle: {
                            fontSize: '0.12rem'
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: Math.ceil(vaulemax),
                        interval: Math.ceil(vaulemax / 6),
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: '0.14rem',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 120,
                        interval: 20,
                        scale: true,//刻度范围一致
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            formatter: function (value) {
                                return value + '%';
                            },
                            textStyle: {
                                fontSize: '0.14rem',
                                fontWeight: 'bold'
                            }
                        }
                    }
                ],
                series: [
                    {
                        data: yAxisData1.map(item => parseInt(item) > 0 ? item : null),
                        name: 'FAIL_QTY',
                        type: 'bar',
                        stack: 'stack1',
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                color: '#FF3374',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        data: yAxisData2.map(item => parseInt(item) > 0 ? item : null),
                        name: 'OUTPUT_QTY',
                        type: 'bar',
                        stack: 'stack1',
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#07C160',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'YIELD',
                        type: 'line',
                        yAxisIndex: 1,
                        data: yieldrate.map(item => parseInt(item) > 0 ? item : 0),
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(237, 178, 23, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(237, 178, 23, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#edb217', label: { show: false } } }
                    }
                ]
            };
            myChart.setOption(options);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
    </script>

</body>
</html>

